import React from "react";
import classnames from "classnames";
import { connect } from "react-redux";
// import Swiper from 'swiper'
import "./pad";
import "swiper/dist/css/swiper.min.css";
const mapStateToProps = state => {
  return {
    gameList: state.app.gameData,
    userInfo: state.app.userInfo
  };
};
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    chooseCreateGame: (msg) => dispatch(global.allActions.groupActions.chooseCreateGame(msg)),
    openCreateGame: gameData =>
      dispatch(global.allActions.appActions.openCreateGame(gameData))
  };
};
class GamePad extends React.Component<any, any> {
  public constructor(props) {
    super(props);
    this.state = {
      iOSVersion: false
    };
  }

  public componentDidMount() {
    var str = navigator.userAgent.toLowerCase();
    var ver = str.match(/iphone/gi);
    if (ver) {
      this.setState({
        iOSVersion: true
      });
    }

    new Swiper(".swiper-container", {
      // Optional parameters
      direction: "horizontal",
      loop: false,
      pagination: {
        el: ".swiper-pagination"
      }
    });
  }

  public get pageListPaged() {
    // console.warn(this.props.gameList)
    return _.chunk(this.props.gameList, 9);
  }

  checkUserInfo(e) {
    if (e.target.nodeName == "IMG" || e.target.nodeName == "SPAN") {
      if (!e.target.dataset.name) return;
      let gameItem = _.find(this.props.gameList, game => {
        return game.gameName === e.target.dataset.name;
      });

      if (window.location.hash.match(/Club/gi)) {
        sessionStorage.setItem(
          "ClubGame",
          `${gameItem.gameType}#${gameItem.gameName}`
        );

        const gameDataCopy = _.cloneDeep(gameItem);
        // console.log(gameDataCopy)
        gameDataCopy['options'] = gameDataCopy.config.options;
        // gameDataCopy['config'] = JSON.parse(gameDataCopy.optionJson);
        const payConf = gameDataCopy.options.find(
          conf => conf.key === "payType"
        );
        console.log("payConf", payConf);
        payConf.choice = [
          {
            label: "AA支付",
            value: 1
          },
          {
            label: "群主支付",
            value: 3
          }
        ];
        payConf.selected = [1];
        this.props.chooseCreateGame(gameDataCopy);
        this.props.showCreateClub();
        return;
      }

      if (JSON.stringify(this.props.userInfo) == "{}") {
        alert("登录过期，请重新连接!");
        const url = `${config.pre}/personalCenter/${Cookies.get("areaCode")}`;
        const opt = { method: "GET" };
        fetchJson(url, opt).then(data => {
          if (data.result == 600) {
            window.location.href = data.data; //
          }
        });
      } else {
        this.props.openCreateGame(gameItem);
      }
    }
  }

  public componentDidUpdate() {
    new Swiper(".swiper-container", {
      // Optional parameters
      direction: "horizontal",
      loop: false,
      pagination: {
        el: ".swiper-pagination"
      }
    });
  }

  public render() {
    // const { activePageStyle, prePageStyle, nextPageStyle } = this.getPageStyle()
    return (
      <div className="gamepad-container">
        <div className="swiper-container">
          <div
            className="swiper-wrapper"
            onClick={this.checkUserInfo.bind(this)}
          >
            {this.pageListPaged.map((pageData, i) => {
              return (
                <div className="swiper-slide gameicon-layout" key={i}>
                  {pageData.map((game, _i) => {
                    const imgCname = classnames({
                      "game-icon": true
                    });
                    let imgStyle = {
                      background: `url(${game.iconUrl})`
                    };
                    //
                    {
                      /*let imgLoader = this.state.iOSVersion ? */
                    }
                    {
                      /*: <img src={game.iconUrl}  data-name={game.gameName} className="game-icon"/>*/
                    }
                    return (
                      <div
                        className="pure-u-1-3 gameicon-wrapper"
                        key={_i * 10}
                      >
                        <span
                          className="game-icon span-icon"
                          style={imgStyle}
                          data-name={game.gameName}
                        />
                        <span className="game-name">{game.gameName}</span>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
          <div className="swiper-pagination" />
        </div>
        {this.props.gameList ? null : (
          <div className="gamepad-progress">
            <div className="progress-wrapper">
              <img src="img/app/rotate.gif" alt="加载中" />
              <p>游戏列表加载中...</p>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(GamePad);
